<template>
	<view class="container">
		<view style="width: 100%;height: 100vh;">

			<!-- 基本信息 -->
			<view
				style="width: 640rpx;height: 220rpx;text-align: center;border-radius: 6px;box-shadow: 2px 2px 5px #a1a1a1;border: 0.3px solid #d4c8c8;background-color: rgba(255,255,255,0.5);margin: auto;display: flex;margin-top: 10%;">
				<view style="width: 220rpx;height: 220rpx;display: flex;justify-content: center;align-items: center;">
					<image :src="'http://101.43.223.224:8765/image/getImageById?id=' + memberUserInfo.memberUserPhoto"
						style="width: 11vh;height: 11vh;border-radius: 50%;"></image>
				</view>
				<view style="width: 380rpx;height: 220rpx;">
					<view style="width: 380rpx;height: 50rpx;">
						<view style="width: 380rpx; height: 80rpx;">
							<span
								style="font-size: 18px;font-weight: 600;color: darkgray;float: left;line-height: 70rpx;">{{ memberUserInfo.memberUserName === null || memberUserInfo.memberUserName === "" ? memberUserInfo.memberUserRealName : memberUserInfo.memberUserName }}</span>
							
							
							<span>
								<view v-if="userarchives.membershipCardNumber==''"
									style="background-color: rgba(255,255,255,0.5);width: 300rpx;height: 230rpx;border-radius: 6px;box-shadow: 2px 2px 5px #a1a1a1;border: 0.3px solid #d4c8c8;margin-left: 40rpx;">
									<view
										style="width: 200rpx;height: 90rpx;background-color: rgb(55,227,242);margin: auto;margin-top: 70rpx;border-radius: 30px;text-align: center;">
										<span style="line-height: 90rpx;font-size: 17px;color: white;">开通会员</span>
									</view>
								</view>
								
								<view v-else style="width: 300rpx;height: 230rpx;border-radius: 6px;margin-left: 85rpx;">
									<!-- vip标识 -->
									<view
										style="align-items: center; width: 250rpx;height: 60rpx;background-color: rgb(62, 63, 64);border-radius: 30px;border: 0.3px solid rgb(248, 220, 48);margin-top: 25rpx;margin-left: 10rpx;display: flex;">
										
										<view
											style="width: 50rpx;height: 50rpx;float: left;float: left;margin-top: 3rpx;margin-left: 25rpx;">
											<image src="@/static/vip.png" style="width: 55rpx;height: 55rpx;"></image>
										</view>
										<view style="width:45rpx;height: 55rpx;margin-top: 8rpx;margin-left: 10rpx;">
											<span
												style="font-size: 15px;color: rgb(248, 220, 48);line-height: 55rpx;font-weight: 100;">VIP&nbsp;|</span>
										</view>
										<view style="width:110rpx;height: 55rpx;margin-top: 8rpx;margin-left: 20rpx;">
											<span
												style="color: rgba(252, 220, 38, 0.97);font-size: 12px;line-height: 55rpx;font-weight: 100;">{{ memberUserInfo.memberType === '0' ? '次卡会员' : '年卡会员' }}</span>
										</view>
									</view>
								</view>
							</span>
						</view>

						<!-- <view style="width: 380rpx;height: 50rpx;display: flex;">
							<image src="../../../static/boy.png" style="width: 3vh;height: 3vh;"></image>
							<span style="line-height: 40rpx;font-size: 15px;color: darkgray;margin-left: 10rpx;">|</span>
							<span style="line-height: 40rpx;font-size: 15px;color: darkgray;margin-left: 5rpx;">{{userarchives.memberUserAge}}岁</span>
						</view> -->

						<view v-if="userarchives.memberUserSex == 0" style="width: 380rpx;height: 50rpx;display: flex;">
							<image src="../../../static/boy.png" style="width: 3vh;height: 3vh;"></image>
							<span
								style="line-height: 40rpx;font-size: 15px;color: darkgray;margin-left: 10rpx;">|</span>
							<span
								style="line-height: 40rpx;font-size: 15px;color: darkgray;margin-left: 5rpx;">{{userarchives.memberUserAge}}岁</span>
						</view>
						<view v-if="userarchives.memberUserSex == 1" style="width: 380rpx;height: 50rpx;display: flex;">
							<image src="../../../static/girl.png" style="width: 3vh;height: 3vh;"></image>
							<span
								style="line-height: 40rpx;font-size: 15px;color: darkgray;margin-left: 10rpx;">|</span>
							<span
								style="line-height: 40rpx;font-size: 15px;color: darkgray;margin-left: 5rpx;">{{userarchives.memberUserAge}}岁</span>
						</view>
					</view>
				</view>
			</view>

			<!-- 身材体型 -->
			<view
				style="background-color: rgba(255,255,255,0.5);width: 640rpx;height: 260rpx;border-radius: 6px;box-shadow: 2px 2px 5px #a1a1a1;border: 0.3px solid #d4c8c8;margin-top: 20rpx;margin-left: 55rpx;">
				<view style="width: 640rpx;height: 80rpx;text-align: center;margin-top: 30rpx;display: flex;">
					<view style="width: 300rpx;height: 80rpx;margin-left: 170rpx;">
						<span style="font-size: 23px;color: darkgray;font-weight: 600;">身材体型</span>
					</view>
				</view>
				<view style="display: flex;width: 640rpx;height: 130rpx;">
					<view style="width: 320rpx;height: 160rpx;text-align: center;">
						<span
							style="font-size: 20px;color: darkgray;font-weight: 600;margin-top: 30rpx;">身高/体重</span><br>
						<span
							style="font-size: 17px;color: darkgray;">{{userarchives.memberUserHeight}}cm/{{userarchives.memberUserWeight}}kg</span>
					</view>
					<view style="width: 320rpx;height: 130rpx;text-align: center;">
						<span style="font-size: 20px;color: darkgray;font-weight: 600;margin-top: 30rpx;">体脂率</span><br>
						<span style="font-size: 17px;color: darkgray;">{{userarchives.memberUserBodyFat}}%</span>
					</view>
				</view>

			</view>
			<view style="width: 640rpx;height: 230rpx;display: flex;margin-top: 20rpx;margin-left: 55rpx;">
				<!-- 教练邀请码 -->
				<view
					style="background-color: rgba(255,255,255,0.5);width: 640rpx;height: 230rpx;border-radius: 6px;box-shadow: 2px 2px 5px #a1a1a1;border: 0.3px solid #d4c8c8;float: left;">
					<view style="width: 640rpx;height: 80rpx;text-align: center;margin-top: 30rpx;">
						<span style="font-size: 23px;color: darkgray;font-weight: 600;">邀请码</span>
					</view>
					<view style="width: 640rpx;height: 80rpx;text-align: center;">
						<span
							style="font-size: 23px;color: darkgray;font-weight: 600;">{{userarchives.invitationCode}}</span>
					</view>
				</view>

				
			</view>
			<!-- 账号与安全 -->
			<view
				style="background-color: rgba(255,255,255,0.5);width: 640rpx;height: 320rpx;border-radius: 6px;box-shadow: 2px 2px 5px #a1a1a1;border: 0.3px solid #d4c8c8;margin-top: 20rpx;margin-left: 55rpx;">
				<view style="width: 640rpx;height: 80rpx;text-align: center;margin-top: 30rpx;display: flex;">
					<view style="width: 300rpx;height: 80rpx;margin-left: 170rpx;">
						<span style="font-size: 23px;color: darkgray;font-weight: 600;">账号与安全</span>
					</view>
				</view>
				<view style="width: 600rpx;height: 80rpx;margin: auto;border-bottom: 0.3px solid #d4c8c8;">
					<span
						style="font-size: 20px;color: darkgray;font-weight: 600;margin-top: 30rpx;margin-left: 20rpx;float: left;">手机绑定</span>
					<span
						style="font-size: 20px;color: darkgray;font-weight: 600;margin-top: 30rpx;margin-right: 20rpx;float: right;">+86&nbsp;{{userarchives.maskPhone}}</span>
				</view>
				<view style="width: 600rpx;height: 80rpx;margin: auto;border-bottom: 0.3px solid #d4c8c8;">
					<span
						style="font-size: 20px;color: darkgray;font-weight: 600;margin-top: 30rpx;margin-left: 20rpx;float: left;">真实姓名</span>
					<span
						style="font-size: 20px;color: darkgray;font-weight: 600;margin-top: 30rpx;margin-right: 20rpx;float: right;">{{userarchives.memberUserRealName}}</span>
				</view>
			</view>
			<view style="width: 640rpx;height: 260rpx;border-radius: 6px;margin-top: 20rpx;margin-left: 270rpx; text-align: center; "@click="goarchiveseUpdate1()">
				<view style="width: 200rpx; ">
					<u-button type="primary" text="修改信息"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				memberUserInfo: {},
				userarchives: {
					id: ''
				},
				disabled: true
			}
		},
		onLoad() {
			if (uni.getStorageSync('userInfo')) {
				this.userInfo = uni.getStorageSync('userInfo')
			}
			this.getUserInformation()
			this.getUserArchives()
		},
		methods: {
			//查询用户数据
			getUserInformation() {
				uni.request({
					url: 'http://127.0.0.1:17000/studentTraining/getUserInformation',
					data: {
						id: this.userInfo.id,
						venueUniqueIdentifier: this.userInfo.venueUniqueIdentifier
					},
					success: (res) => {
						this.memberUserInfo = res.data.data.data
					},
				})
			},
			//查询用户个人档案
			getUserArchives() {
				uni.request({
					url: 'http://127.0.0.1:17000/Archives/selectArticle',
					data: {
						id: this.userInfo.id,
					},
					success: (res) => {
						this.userarchives = res.data.data.data
						console.log(this.userarchives)
					},
				})
			},
			//跳转修改个人信息页面
			goarchiveseUpdate1() {
				uni.navigateTo({
				  url: '/pages/student/index/archiveseUpdate1',
				  animationType: 'slide-out-top',
				  animationDuration: 200
				})
			},
			//跳转修改身材体型页面
			goarchiveseUpdate2() {
				uni.navigateTo({
				  url: '/pages/student/index/archiveseUpdate2',
				  animationType: 'slide-out-top',
				  animationDuration: 200
				})
			},
			//跳转修改账号与安全页面
			goarchiveseUpdate3() {
				uni.navigateTo({
				  url: '/pages/student/index/archiveseUpdate3',
				  animationType: 'slide-out-top',
				  animationDuration: 200
				})
			},
		}
	}
</script>

<style>
	/* 设置背景图片 */
	.container {
		width: 100%;
		height: 100vh;
		/* display: flex; */
		justify-content: center;
		align-items: center;
		background-image: url('http://101.43.223.224:8765/image/getImageById?id=6755');
		background-size: cover;
		overflow: auto;
		/* 使背景图片覆盖整个页面 */
		/* background-repeat:repeat-y; /* 根据y轴重复显示背景图片 */
	}
</style>